<template>
  <div class="LicenseInformation">
    <div class="pubBig standard">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dLeftMain">
        <div>
          <el-tree
            :data="datalist"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
            node-key="id"
            v-loading="isLoading"
            :highlight-current="true"
          >
            <span
              class="custom-tree-node"
              slot-scope="{ node, data }"
            >
              <span
                style="display:inline-block;width: 200px;">{{ data.title }}</span>
              <span style>
                <el-button
                  v-if="node.parentid!=0"
                  type="text"
                  size="mini"
                  @click="() => addjgTJ(node, data)"
                >新增下一级</el-button>
                <el-button
                  v-if="node.parentid!=-1"
                  style="color:red;margin-left:15px "
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >删除</el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="dRightMain">
        <p v-if="false">
          <span>
            <b>*</b>模块编号：
          </span>
          <input
            type="text"
            class="form-control"
            v-model="Permission"
          />
        </p>
        <p v-if="false">
          <span>
            <b>*</b>上级菜单编号：
          </span>
          <input
            type="text"
            class="form-control"
            v-model="Permission.parentid"
          />
        </p>
        <p>
          <span>
            <b>*</b>URL链接：
          </span>
          <input
            type="text"
            class="form-control"
            v-model.trim="Permission.url"
          />
        </p>
        <p>
          <span>
            <b>*</b>菜单页面名称：
          </span>
          <input
            type="text"
            class="form-control"
            v-model.trim="Permission.title"
          />
        </p>
        <p>
          <button
            class="btn btn-success"
            style="margin:0 10px 0 130px"
            @click="Susscssful"
          >新增顶级菜单</button>
          <button
            class="btn btn-default"
            @click="getReset"
          >重置</button>
        </p>
      </div>
      <!--弹框增加机构-->
      <div
        class="blackBg hyCZBg"
        v-if="isShow=='addJGTJ'"
      >
        <div class="panel-default column2">
          <em
            class="closes"
            @click="showDialog()"
          >×</em>
          <div class="panel-heading">添加下一级</div>
          <div class="pucLabel">
            <div class="form-group clearfix">
              <p>
                <label>菜单页面名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="PermissionTK.title "
                />
              </p>
              <p>
                <label>url链接：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="PermissionTK.url"
                />
              </p>
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default"
              @click="showDialog()"
            >关闭</button>
            <button
              type="button"
              class="btn btn-primary"
              @click="addJGDataTJ()"
            >保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: [],
      defaultProps: {
        children: "children",
        label: "label"
      },

      data2: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      defaultProps2: {
        children: 'children',
        label: 'label'
      },


      Permission: {
        id: '',// 主键 ,
        name: '',// 系统名称 ,
        parentid: '',// 上级编号 ,
        url: '',// url地址或本地相对路径 ,
        childurl: '',// 子级url地址 ,
        title: '', //无 ,
        label: '', //无 ,
        openmothod: '',// 调取方式 ,
        argument: '',// 附加参数 ,
        icon: '',// 图标路径 ,
        effective: true,// 是否有效 ,
        sort: 0,// 排序序号 ,
        children: [],// 子权限列表
      },
      PermissionTK: {
        id: '',// 主键 ,
        name: '',// 系统名称 ,
        parentid: '',// 上级编号 ,
        url: '',// url地址或本地相对路径 ,
        childurl: '',// 子级url地址 ,
        title: '', //无 ,
        label: '', //无 ,
        openmothod: '',// 调取方式 ,
        argument: '',// 附加参数 ,
        icon: '',// 图标路径 ,
        effective: true,// 是否有效 ,
        sort: 0,// 排序序号 ,
        children: [],// 子权限列表
      },
      isShow: "",
      selectZZJGObj: {},
      model_select_label: [], //权限类别
      model_pop_up: [], //弹出方式
      CDname: "",
      QQlabel: "",
      JGname: "",
      URlname: "",
      isLoading: false
    };
  },
  methods: {
    handleNodeClick (val) {
      console.log(val);
      this.Permission = val
      // if (val.childs) {
      //     this.multipleSelection = val;
      // }
      // else if (val.powers) {
      //     console.log(val);
      //     val.powers.forEach(v => {
      //         v.Topname = val.name;
      //     });
      // }
    },
    //查询菜单列表
    queryG () {
      var params = {};
      this.isLoading = true
      //GET /api/Permission/GetList
      this.$get("permissions", params)
        .then(res => {
          console.log("菜单列表查询结果");
          console.log(res);
          if (res.code == 0) {
            this.datalist = [];
            this.datalist = res.data;
            // this.datalist = res.data
            console.log("菜单列表");
            console.log(this.datalist[0]);
            // console.log(this.datalist[0].label);
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err);
          this.isLoading = false
        });
    },
    //添加菜单
    Susscssful () {
      var params = this.Permission;
      // params.parentid = 0
      //POST /api/Permission/Create
      let url = this.Permission.id ? '/permissions/Update' : 'permissions/Create'
      this.$post(url, params)
        .then(res => {
          console.log("新增菜单结果");
          console.log(res);
          if (res.code == 0) {
            this.queryG();
            this.Permission = {
              id: '',// 主键 ,
              name: '',// 系统名称 ,
              parentid: '',// 上级编号 ,
              url: '',// url地址或本地相对路径 ,
              childurl: '',// 子级url地址 ,
              title: '', //无 ,
              label: '', //无 ,
              openmothod: '',// 调取方式 ,
              argument: '',// 附加参数 ,
              icon: '',// 图标路径 ,
              effective: true,// 是否有效 ,
              sort: 0,// 排序序号 ,
              children: [],// 子权限列表
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //添加子级菜单
    addjgTJ (node, data) {
      this.selectZZJGObj = data;
      console.log(666);
      console.log(data);
      this.isShow = "addJGTJ";
    },
    addJGDataTJ () {
      var params = this.PermissionTK;
      // this.PermissionTK.id = this.selectZZJGObj.id
      this.PermissionTK.parentid = this.selectZZJGObj.id
      this.$post("permissions/Create", params)
        .then(res => {
          console.log("新增菜单结果");
          console.log(res);
          if (res.code == 0) {
            this.queryG();
            this.PermissionTK = {
              id: '',// 主键 ,
              name: '',// 系统名称 ,
              parentid: '',// 上级编号 ,
              url: '',// url地址或本地相对路径 ,
              childurl: '',// 子级url地址 ,
              title: '', //无 ,
              label: '', //无 ,
              openmothod: '',// 调取方式 ,
              argument: '',// 附加参数 ,
              icon: '',// 图标路径 ,
              effective: true,// 是否有效 ,
              sort: 0,// 排序序号 ,
              children: [],// 子权限列表
            }
            this.isShow = ""
            this.selectZZJGObj = {};
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //删除菜单
    remove (node, data) {
      this.selectZZJGObj = data;
      console.log(666);
      console.log(this.selectZZJGObj);
      // const parent = node.parent;
      // const children = parent.data.powers || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      this.$confirm("删除此菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var params = {
            id: this.selectZZJGObj.id
          }
          this.$post("permissions/" + params.id + "/Delete", params)
            .then(res => {
              console.log("删除菜单结果");
              console.log(res);
              if (res.code == 0) {
                this.queryG();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(_ => { });
    },
    getReset () {
      this.Permission = {
        id: '',// 主键 ,
        name: '',// 系统名称 ,
        parentid: '',// 上级编号 ,
        url: '',// url地址或本地相对路径 ,
        childurl: '',// 子级url地址 ,
        title: '', //无 ,
        label: '', //无 ,
        openmothod: '',// 调取方式 ,
        argument: '',// 附加参数 ,
        icon: '',// 图标路径 ,
        effective: true,// 是否有效 ,
        sort: 0,// 排序序号 ,
        children: [],// 子权限列表
      }
    },
    showDialog () {
      this.$message({ message: "已经取消新增", type: "warning" });
      this.isShow = "";
    },
    getdata (KeyCode) {
      var data = {
        code: "get_sys_dict2",
        input: {
          code: KeyCode
        }
      };
      // this.$post("CloudHIS/getRedisDataByCode", data)
      //   .then(res => {
      //     console.log(res);
      //     res.data.forEach(v => {
      //       if (v.keycode == "Permission_categories") {
      //         this.model_select_label = v.dtl;
      //       } else {
      //         this.model_pop_up = v.dtl;
      //       }
      //     });
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    }
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }

    var a = [
      "Permission_categories", //权限类别
      "pop_up" //弹出方式
    ];
    this.queryG();
    this.getdata(a);
  }
};
</script>
<style lang="scss">
.LicenseInformation {
  .dLeftMain {
    position: absolute;
    width: 370px;
    top: 45px;
    left: 0;
    bottom: 20px;
    border-right: 1px solid #ddd;
    overflow: auto;
    padding-top: 8px;
  }

  input {
    color: #000;
  }

  .dRightMain {
    width: 800px;
    height: 500px;
    margin-left: 370px;
    padding: 20px 0 0 20px;

    p {
      clear: noth;
      height: 32px;
      margin-bottom: 10px;

      .form-control {
        width: 200px;
      }

      span {
        display: block;
        float: left;
        width: 130px;
        line-height: 32px;

        b {
          color: red;
          position: relative;
          top: 2px;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }

  .column2 {
    width: 640px;

    label {
      width: 110px;
    }
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .el-tree > .el-tree-node {
    min-width: 100%;
    display: inline-block;
  }
}
</style>
